<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>iStudy学习中心</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    {% load static %}
    <link href="{% static "css/blog.css" %}" rel="stylesheet">
    <link href="{% static "css/comment/comment.css" %}" rel="stylesheet">
    <link href="{% static "css/comment/style.css" %}" rel="stylesheet">

</head>

<body>

{#nav部分使用的组件#}
{% include "nav.html" %}

<div class="container">
    {#    中间的大标题#}
    <div class="blog-header">
        <h3 class="blog-title">{{ article_obj.title }}</h3>
        <p class="lead blog-description">{{ article_obj.detail.content | safe }}</p>
    </div>


</div><!-- /.container -->


{#评论#}
<div class="commentAll">

    <div class="reviewArea clearfix">
        <div class="flex-text-wrap">
            <pre class="pre"><span></span><br></pre>
            <textarea class="content comment-input" placeholder="Please enter a comment…"
                      onkeyup=""></textarea></div>
        <a href="javascript:;" id="comment" class="plBtn">评论</a>
    </div>

    <div class="comment-show">
{#        查询所有的评论并显示#}
        {% for comment in article_obj.comment_set.all %}

            <div class="comment-show-con clearfix">
                <div class="comment-show-con-img pull-left"><img src="{{ comment.author.avatar.url }}" alt=""></div>
                <div class="comment-show-con-list pull-left clearfix">
                    <div class="pl-text clearfix">
                        <a href="#" class="comment-size-name">{{ comment.author.username }}: </a>
                        <span class="my-pl-con">&nbsp;{{ comment.content }}</span>
                    </div>
                    <div class="date-dz">
                        <span class="date-dz-left pull-left comment-time">{{ comment.time }}</span>
                        <div class="date-dz-right pull-right comment-pl-block">
                            <a href="javascript:;" class="removeBlock">删除</a>
                        </div>
                    </div>
                    <div class="hf-list-con"></div>
                </div>
            </div>

        {% endfor %}


    </div>

</div>


{#最下面的部分#}
<footer class="blog-footer">
    <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a
            href="https://twitter.com/mdo">@mdo</a>.</p>
    <p>
        <a href="#">Back to top</a>
    </p>
</footer>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


{#评论的script#}
<script>
    // 文章是带积分的，系列的文章，时间到了之后发送请求，完成积分的计算
    var user_id = {{ request.user_obj.pk }};
    var article_id = {{ article_obj.pk }};
    var point = {{ article_obj.point }};
    var time = {{ article_obj.duration.total_seconds }};

    if(point !== 0){
        setTimeout(function () {
            $.ajax({
                url: "/point/",
                data:{
                    user_id:user_id,
                    article_id:article_id,
                    point:point,
                },
                success:function (res) {
                    if(res.status){
                        alert(`完成阅读，获取${point}积分`)
                    }
                }
            })
        },time*1000)
    }


    //评论
    $("#comment").click(function () {
        var content = $(".comment-input").val(); //用户评论的内容
        var article_id = {{ article_obj.pk }};  //文章的id
        var author_id = {{ request.user_obj.pk }};  //作者的id
        var author_name = '{{ request.user_obj.username }}';    //作者的名子
        var author_avatar = '{{ request.user_obj.avatar.url }}';    //头像
        $.ajax({
            url: "/comment/",
            data: {
                content: content,
                article_id: article_id,
                author_id: author_id,
            },
            success: function (res) {
                if (res.status) {  //如果有返回值，就插入
                    {#插入一条评论让它放到最前面#}
                    $(".comment-show").before(`<div class="comment-show-con clearfix">
            <div class="comment-show-con-img pull-left"><img src="${author_avatar}" alt=""></div>
            <div class="comment-show-con-list pull-left clearfix">
                <div class="pl-text clearfix">
                    <a href="#" class="comment-size-name">${author_name}: </a>
                    <span class="my-pl-con">${content}</span>
                </div>
                <div class="date-dz">
                    <span class="date-dz-left pull-left comment-time">${res.time}</span>
                    <div class="date-dz-right pull-right comment-pl-block">
                        <a href="javascript:;" class="removeBlock">删除</a>
                    </div>
                </div>
                <div class="hf-list-con"></div>
            </div>
        </div>`)
                    {#插入成功取消文本框的值#}
                    $(".comment-input").val("");
                    alert("插入成功")
                }
            }

        })
    })

</script>


</body>
</html>

